<template>
  <div id="food">
    <div>
      <p style="background-color: rgb(242, 242, 242)">查询</p>
      <div id="sousuo">
        <el-form :inline="true"
                 :model="formInline"
                 class="demo-form-inline"
                 label-width='60px'
                 label-position='left'>
          <el-form-item label="搜索">
            <el-input v-model="formInline.user"
                      placeholder="可以根据菜品类型进行搜索"></el-input>
          </el-form-item>
          <el-button type="primary"
                     @click="chaxun"
                     round>查询</el-button>
        </el-form>
      </div>
    </div>
    <div>
      <p style="background-color: rgb(242, 242, 242)">库存盘点
        <el-button type="success"
                   @click="xinzenpandian()"
                   round>新增盘点单</el-button>
      </p>
      <el-dialog :visible.sync="dialogVisible"
                 width="70%"
                 :before-close="handleClose">
        <p>菜品盘点单
          <el-button type="danger"
                     @click="fanhui"
                     plain>返回</el-button>
          <el-button type="success"
                     @click="quren"
                     plain>保存</el-button>
        </p>

        <el-descriptions title=""
                         :column="3"
                         border>
          <el-descriptions-item label="制单人"
                                label-class-name="my-label"
                                content-class-name="my-content">{{guanli}}</el-descriptions-item>
          <el-descriptions-item label="制单时间">{{shijian}}</el-descriptions-item>
          <el-descriptions-item label="审核人">
            <el-select v-model="xuanzeshenhe"
                       placeholder="请选择">
              <el-option v-for="(item,index) in guanliru"
                         :key="index"
                         :label="item.user_name"
                         :value="item.user_id"></el-option>
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            <el-input v-model="note"></el-input>
          </el-descriptions-item>
        </el-descriptions>
        <div>
          <el-table :data="caipinpandianx"
                    stripe
                    style="width: 100%"
                    :cell-style="{border:'1px solid #DCDCDC'}"
                    :header-cell-style="{background:'#F0F0F0',border:'1px solid #DCDCDC',color:'#000000'}">
            <el-table-column prop="id"
                             label="序号"
                             width="120"
                             align='center'></el-table-column>
            <el-table-column prop="menu_id"
                             label="菜品编码"
                             width="120"
                             align='center'></el-table-column>
            <el-table-column prop="menu_name"
                             label="菜品名称"
                             width="100"
                             align='center'></el-table-column>
            <el-table-column prop="menu_category"
                             label="菜品类别"
                             width="100"
                             align='center'></el-table-column>
            <el-table-column prop="menu_danwei"
                             label="菜品单位"
                             width="100"
                             align='center'></el-table-column>
            <el-table-column prop="menu_amount"
                             label="系统库存"
                             width="120"
                             align='center'></el-table-column>
            <el-table-column prop="menu_note"
                             label="备注"
                             width="180"
                             align='center'></el-table-column>
            <el-table-column fixed="right"
                             label="操作"
                             align='center'>
              <template slot-scope="scope">
                <el-button v-if='caipinpandianx[scope.$index].id'
                           @click="chacha(scope.$index)"
                           type="text"
                           size="small">x</el-button>
                <el-button v-else
                           @click="zhengjiacaipin"
                           type="text"
                           size="small">+</el-button>
              </template>

            </el-table-column>
          </el-table>
          <!-- 页码 -->
          <el-pagination @size-change="fentiao"
                         @current-change="fenye"
                         :page-sizes="[5,10,15,20,25,30]"
                         :page-size="5"
                         layout="total,sizes,prev, pager, next, jumper"
                         :total="caipinpd">
          </el-pagination>
        </div>
      </el-dialog>
      <el-dialog title="菜品库存"
                 :visible.sync="ercen"
                 width="60%"
                 :before-close="handleClose">
        <el-input @keyup.enter.native="chaxunxunran"
                  placeholder="可输入菜品名称查询"
                  prefix-icon="el-icon-search"
                  v-model="input2">
        </el-input>
        <el-container>
          <el-aside width="100px">
            <el-row class="tac">
              <el-col :span="24">
                <h5>菜品类别</h5>
                <el-menu default-active="1"
                         class="el-menu-vertical-demo"
                         :before-close="handleClose"
                         background-color="#FFFFFF"
                         text-color="#333333">
                  <el-menu-item :index="(index+1+'')"
                                @click="dian(item)"
                                v-for="(item,index) in arrlb"
                                :key="index">
                    <span slot="title">{{item}}</span>
                  </el-menu-item>

                </el-menu>
              </el-col>
            </el-row>
          </el-aside>
          <el-main>
            <el-row class="tuji">
              <div v-for="(item,index) in menuData"
                   :key="index"
                   @click="xuanzhong(item)"
                   class="cd">

                <el-col :span='1'></el-col>
                <div class="cc">
                  <el-col :span='7'>
                    <img src="../../assets/shicai.png"
                         alt="">
                    <div>
                      <span>{{item.menu_name}}</span>
                      <span class="zuok">库存：{{item.menu_amount}}</span>
                    </div>
                  </el-col>
                </div>

              </div>
            </el-row>
          </el-main>
        </el-container>
        <div id="bdan">
          <span slot="footer"
                class="dialog-footer">
            <el-button type="primary"
                       @click="ercen = false">确 定</el-button>
            <el-button @click="ercen = false">取 消</el-button>
          </span>
        </div>

      </el-dialog>
      <div id="biaoge">
        <el-table :data="tableData"
                  stripe
                  style="width: 100%"
                  :cell-style="{border:'1px solid #DCDCDC'}"
                  :header-cell-style="{background:'#F0F0F0',border:'1px solid #DCDCDC',color:'#000000'}">
          <el-table-column prop="check_id"
                           label="盘点单号"
                           width="250"
                           align='center'></el-table-column>
          <el-table-column prop="check_type"
                           label="类型"
                           width="120"
                           align='center'></el-table-column>
          <el-table-column prop="check_preparer"
                           label="制单人"
                           width="120"
                           align='center'></el-table-column>
          <el-table-column prop="check_mtime"
                           label="制单时间"
                           width="180"
                           align='center'></el-table-column>
          <el-table-column prop="check_auditor"
                           label="审核人"
                           width="140"
                           align='center'></el-table-column>
          <el-table-column prop="check_atime"
                           label="审核时间"
                           width="100"
                           align='center'></el-table-column>
          <el-table-column prop="check_note"
                           label="备注"
                           width="200"
                           align='center'></el-table-column>
          <el-table-column fixed="right"
                           label="操作"
                           align='center'>
            <template slot-scope="scope">
              <div v-if='!parseInt(tableData[scope.$index].shenhe)'>
                <el-button @click="onDel(scope.$index)"
                           type="text"
                           size="small">审核</el-button>
                <el-button @click="onCheck(scope.row)"
                           type="text"
                           size="small">修改</el-button>
              </div>
              <h3 v-else>已审核</h3>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="编辑菜品"
                   :visible.sync="bianji"
                   width="30%"
                   :center='true'>
          <el-form ref="adddata"
                   :model="adddata"
                   label-width="80px">
            <el-form-item label="盘点单号">
              <el-input v-model="adddata.check_id"
                        disabled=""></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-input v-model="adddata.check_type"></el-input>
            </el-form-item>
            <el-form-item label="制单人">
              <el-input v-model="adddata.check_preparer"></el-input>
            </el-form-item>
            <el-form-item label="制单时间">
              <el-input v-model="adddata.check_mtime"></el-input>
            </el-form-item>
            <el-form-item label="审核人">
              <el-input v-model="adddata.check_auditor"></el-input>
            </el-form-item>
            <el-form-item label="审核时间">
              <el-input v-model="adddata.check_atime"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="adddata.check_note"></el-input>
            </el-form-item>
            <el-form-item class="bjan"
                          label-width="0px">
              <el-button type="primary"
                         @click="bianjiqueren()">确 定</el-button>
              <el-button @click="bianji = false">取 消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 页码 -->
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :page-sizes="[5,10,15,20,25,30]"
                       :page-size="5"
                       layout="total,sizes,prev, pager, next, jumper"
                       :total="zhongtiao">
        </el-pagination>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data () {
    return {
      formInline: {
        user: '',
        region: ''
      },
      tableData: [
        {
          check_id: '10',
          check_type: '12345678',
          check_preparer: 'Megan',
          check_auditor: '小程序',
          check_atime: '2022-3-8',
          check_mtime: '普通用户',
          check_note: '57.00'
        }
      ],
      menuDataD: [],
      menuData: [],
      dialogVisible: false,
      ercen: false,
      input2: '',
      quan: [],
      adddata: {
        check_id: '',
        check_type: '',
        check_preparer: '',
        check_auditor: '',
        check_atime: '',
        check_mtime: '',
        check_note: '',
        shenhe: '',
        lb: '',
        zd: '',
        sh: ''
      },
      arrlb: [],
      ye: 1,
      tiao: 5,
      quan1: [],
      bianji: false,
      caipinpandian: [{ id: '' }],
      before: [],
      tiao1: 5,
      ye1: 1,
      caipinpandianx: [],
      note: '',
      guanliru: [],
      xuanzeshenhe: ''
    }
  },
  methods: {
    xuanranaxios () {
      this.$axios({
        method: 'get',
        url: '/stockTaking/xuanran'
      }).then((res) => {
        this.quan = res.data.data
        this.chaxun()
      })
    },
    xinzenpandian () {
      this.xuanranx()
      this.dialogVisible = true
      this.Search()
      // this.caipinpandian = [{}]
    },
    xuanzhong (v) {
      if (this.caipinpandian.length == 1) {
        this.caipinpandian = []
      } else {
        this.before.splice(this.before.length - 1, 1)
        this.caipinpandian = this.before
      }
      let a = [...this.caipinpandian]
      if (!a.length) {
        a.push(v)
      } else {
        a.forEach((item, i) => {
          console.log(item, v);
          if (v.menu_id == item.menu_id) {
            a.splice(i, 1)
            return
          } else if (i == a.length - 1) {
            a.push(v)
          }
        })
      }
      a.filter((v, i) => {
        v.id = i + 1
      })
      a.push({ id: '' })
      this.before = this.caipinpandian = [...a]
      this.xuanranx()
    },
    dian (v) {
      this.menuData = [...this.menuDataD]
      let a = [...this.menuData]
      if (v != '全选') {
        let arr = a.filter(item => {
          if (item.menu_category == v) {
            console.log(item);
            return item
          }
        })
        this.menuData = [...arr]
      }
    },
    fanhui () {
      this.caipinpandian = [{ id: '' }]
      this.dialogVisible = false
    },
    quren () {
      let j = [...this.menuDataD]
      let b = this.caipinpandian[0].menu_category
      j.forEach(item => {
        if (item.menu_category == b) {
          b = item.menu_id
        }
      })
      let a = JSON.parse(sessionStorage.getItem('user')).user_id
      let tableData1 =
      {
        check_id: (this.quan.length + 2),
        check_type: b,
        check_preparer: a,
        check_auditor: this.xuanzeshenhe,
        check_mtime: this.shijian,
        check_note: this.note
      }

      this.$axios({
        method: 'post',
        url: '/stockTaking/xinzen',
        data: tableData1
      }).then((res) => {
        console.log(res);
        this.xuanranaxios()
        this.note = ''
        this.xuanzeshenhe = ''

        this.dialogFormVisible = false
        this.fanhui()
        this.xuanranaxios()
        this.$message({
          showClose: true,
          message: '恭喜你，盘点信息增加成功！',
          type: 'success',
          duration: 2000,
        })
      })

    },
    chacha (v) {
      this.caipinpandian.splice(v, 1)
      this.xuanranx()
    },
    bianjiqueren () {
      this.$axios({
        method: 'post',
        url: '/stockTaking/bianji',
        data: this.adddata
      }).then((res) => {


        console.log(res);
        // this.ye = 1
        this.xuanranaxios()
        this.xuanranaxios()
        this.$message({
          showClose: true,
          message: '恭喜你，盘点信息修改成功！',
          type: 'success',
          duration: 2000,
        })
      })
      this.bianji = false
    },
    zhengjiacaipin () {
      this.ercen = true
      this.$axios({
        method: 'get',
        url: '/food/xuanran'
      }).then((res) => {
        // console.log(res.data.data);
        this.menuDataD = res.data.data
        let arr = []
        arr.push("全选")
        this.menuDataD.forEach((v, i) => {
          arr.push(v.menu_category)
        })
        arr = Array.from(new Set(arr))
        this.arrlb = [...arr]
        this.dian(this.arrlb[0])
      })
    },
    chaxunxunran () {
      let a = this.input2
      this.menuData = [...this.menuDataD]
      if (a != '') {
        let arr1 = this.menuData.filter((item, idex, arr) => {
          if (item["menu_name"].indexOf(a) >= 0) {
            return item
          }
        })
        this.menuData = [...arr1]
      }

    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    // 查询
    onSubmit (val) {

    },
    onDel (datav) {
      let data = new Date
      this.adddata = this.tableData[datav]
      this.adddata.shenhe = 1
      this.adddata.check_atime = data.getFullYear() + '-' + (data.getMonth() + 1) + '-' + data.getDate()
      this.bianjiqueren()
    },

    chaxun () {
      this.quan1 = [...this.quan]
      if (this.formInline.user != '') {
        let arr1 = this.quan1.filter((item, idex, arr) => {
          if (item["check_type"].toString().indexOf(this.formInline.user) >= 0) {
            return item
          }
        })
        this.quan1 = [...arr1]

      }
      this.xuanran()
    },
    // 编辑详情
    onCheck (data) {
      this.bianji = true;
      this.adddata = { ...data }
    },
    // 每页多少条数据
    handleSizeChange (val) {
      this.tiao = val
      this.xuanran()
    },
    // 当前页
    handleCurrentChange (val) {
      this.ye = val
      this.xuanran()
    },
    xuanran () {
      this.tableData = this.quan1.slice((this.ye - 1) * this.tiao, this.ye * this.tiao)
    },
    fentiao (val) {
      this.tiao1 = val
      this.xuanranx()
    },
    // 页
    fenye (val) {
      this.ye1 = val
      this.xuanranx()
    },
    xuanranx () {
      this.caipinpandianx = this.caipinpandian.slice((this.ye1 - 1) * this.tiao1, this.ye1 * this.tiao1)
    },
    Search: function () {
      this.$axios({
        url: '/worker/getworker',
      }).then((res) => {
        this.guanliru = [...res.data.data]
      })
    }


  },
  mounted () {
    this.xuanranaxios()

  },
  computed: {
    zhongtiao () {
      return this.quan1.length
    },
    guanli () {
      let a = JSON.parse(sessionStorage.getItem('user'))
      return a.user_name
    },
    shijian () {
      let data = new Date
      return data.getFullYear() + '-' + (data.getMonth() + 1) + '-' + data.getDate()
    },
    caipinpd () {
      return this.caipinpandian.length
    }
  }
}
</script>


<style lang="less" scoped>
#food {
  p {
    font-size: 20px;
    padding: 0 20px;
    border: 1px solid #dcdcdc;
    height: 68px;
    line-height: 68px;
    button {
      float: right;
      margin-top: 14px;
      margin-right: 15px;
    }
  }
  #sousuo {
    padding: 20px;
    border: 1px solid #dcdcdc;
    margin-bottom: 10px;
    form {
      height: 64px;
      padding: 11px 0;
    }
    .el-input {
      width: 300px;
    }
  }
}
#biaoge {
  margin-top: 15px;
  border: 1px solid #dcdcdc;
  padding: 18px 10px 20px 10px;
}
.el-table {
  margin-bottom: 30px;
}
h5 {
  width: 99px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  font-size: 16px;
}
.tuji {
  margin-top: 20px;

  .cd {
    .el-col-1 {
      height: 1px;
    }
    .cc {
      .el-col-7 {
        margin-bottom: 20px;
        height: 200px;
        border: 1px solid #dcdcdc;

        padding: 10px;
        img {
          width: 203.1px;
          height: 140px;
        }
        div {
          padding: 15px;
          .zuok {
            margin-left: 60px;
          }
        }
      }
    }
  }
}
</style>

<style lang="less" >
#food {
  .el-pagination {
    margin-top: 50px;
    text-align: center;
  }
  .is-bordered .el-descriptions-item__cell {
    padding: 12px 20px;
  }
  .el-menu-item {
    text-align: center;
    border: 1px solid #dcdcdc;
  }
  .el-main {
    padding: 0;
  }

  .bjan {
    text-align: center;
  }
  .el-form-item__label {
    text-align: left;
    width: 69px;
  }
  #bdan {
    margin-top: 20px;
    text-align: center;
    button {
      width: 150px;
      margin: 0 30px;
    }
  }
}
</style>